import React, { Component } from 'react'
import {Table} from 'antd'
import '../../less/index.less'
import '../../less/program-list.less'
import { withRouter } from 'react-router-dom'
import EditableCell from '../common/editable-cell'
import { connect } from 'react-redux'
import * as taskActions from '../../actions/task'
import UrlPattern from 'url-pattern'
import { FormattedMessage } from 'react-intl'

class AssignmentVideoBody extends Component {
  constructor (props) {
    super(props)
    this.state = {
      isShowPaperTable: false,
      expandIconAsCell: false,
      expandRowByClick: true,
      expandedRowKeys: [],
      taskId: 0
    }
  }

  componentDidMount () {
    const pattern = new UrlPattern('/program/:programId/task/:taskId/paper/sections')
    const urlParams = pattern.match(this.props.location.pathname) || {}
    this.setState({taskId: urlParams.taskId})
    this.props.getSections(urlParams.taskId)
  }

  onCellChange (value, record) {
    this.props.editVideoAddress(this.state.taskId, record.id, value)
  }

  render () {
    const sections = this.props.sections
    const columns = [{
      title: <FormattedMessage id='名称' />,
      dataIndex: 'title',
      width: '20%',
      render: (text, record) => {
        return <span>{text}</span>
      }}, {
        title: <FormattedMessage id='高手视频链接' />,
        dataIndex: 'description',
        width: '17%',
        render: (text, record) => {
          return <EditableCell
            value={record.address} id={record.id}
            onChange={value => this.onCellChange(value, record)}
          />
        }
      }]

    return (
      <div className='margin-t-4'>
        <Table dataSource={sections} columns={columns} pagination={false} className='task'
          expandRowByClick={this.state.expandRowByClick}
          expandIconAsCell={this.state.expandIconAsCell}
          rowKey={record => record.id}
          title={() => <h3><FormattedMessage id='编程题试题' /></h3>} />
      </div>
    )
  }
}

const mapStateToProps = state => ({
  sections: state.sections
})

const mapDispatchToProps = dispatch => ({
  getSections: (taskId) => dispatch(taskActions.getSections(taskId)),
  editVideoAddress: (taskId, sectionId, videoAddress) => dispatch(taskActions.editVideoAddress(taskId, sectionId, videoAddress))
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(AssignmentVideoBody))
